<template>
    <div>
        <h3>v-for</h3>
        <!-- 遍历数组容器的时候 给每一项内容 添加一个key 标识唯一 :key='index' v-bind:属性名='' -->
        <h4>数组</h4>
        <ul> 
            <li v-for="(ele,index) in arr" :key="index">
                下标：{{index}} 元素：{{ele}}
            </li>
        </ul>
        <p  v-for="item in arr" :key="item">{{item}}</p>
        <hr>
        <h4>遍历书名</h4>
        <ul>
            <li v-for="item in books" :key="item.id">
                <h3>书名：{{item.name}}</h3>
                <p>价格：{{item.price}}</p>
            </li>
        </ul>
        <hr>
        <p>对象可以直接读取：{{obj.user}} {{obj.age}}</p>
        <!-- 遍历对象少见 一般多是数组对象 -->
        <ul>
            <li v-for="(value,name,index) in obj" :key="index">
                {{index}}-{{name}}:{{value}}
            </li>
        </ul>
        <hr>
        <h3>v-for 与v-if 一同使用</h3>
        <ul>
            <!-- 报错 -->
            <!-- <li v-for="item in foods" :key="item.id" v-if="item.flag">{{item.name}}</li> -->
            <!-- 方法1：v-show -->
            <!-- <li v-for="item in foods" :key="item.id" v-show="item.flag">{{item.name}}</li> -->
            <!-- 方法2：template -->
            <template v-for="item in foods">
                <li :key="item.id" v-if="item.flag">{{item.name}}</li>
            </template>
        </ul>
    </div>
</template>
<script>

export default {
    data(){
        return{
            arr:[10,20,30],
            obj:{
                user:'admin',
                age:20,
                sex:'女'
            },
            books:[
                {
                    id:1,
                    name:'三国演义',
                    price:23
                },
                {
                    id:2,
                    name:'西游记',
                    price:23
                },
                {
                    id:3,
                    name:'红楼梦',
                    price:23
                },
            ],
            foods:[
                {
                    id:1,
                    name:'包子',
                    flag:false
                },
                {
                    id:2,
                    name:'油条',
                    flag:true
                },
                {
                    id:3,
                    name:'胡辣汤',
                    flag:false
                },
                {
                    id:4,
                    name:'混沌',
                    flag:true
                },
            ]
        }
    }
}
</script>
